<template>
	<div class='wy-main matching-receive'>
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >我的收货单</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<a-tabs @change="callback" type="card">
			<a-tab-pane tab="全部收货单(0)" key="1">
				<a-row class="a-row-box">
					<a-col :span="22">
						<a-table class="a-table"  :columns="columns" :dataSource="data" />
					</a-col>
				</a-row>
			</a-tab-pane>
			<a-tab-pane tab="运输中(0)" key="2">
				<a-row class="a-row-box">
					<a-col :span="22">
						<a-table class="a-table"  :columns="columns" :dataSource="data" />
					</a-col>
				</a-row>
			</a-tab-pane>
			<a-tab-pane tab=" 已签收(0)" key="3">
				<a-row class="a-row-box">
					<a-col :span="22">
						<a-table class="a-table"  :columns="columns" :dataSource="data" />
					</a-col>
				</a-row>
			</a-tab-pane>
			<a-tab-pane tab="运单查询" key="4">
				<a-row type="flex" justify="center" style="marginTop:100px;">
					<a-col>
						<a-input placeholder="请输入货单编号" style="width: 300px" />
						<a-button type="primary">
							查询
						</a-button>
					</a-col>
				</a-row>
			</a-tab-pane>
		</a-tabs>
		<a-row>
			<a-col :span="22" class="tip-bottom">
				<h6>温馨提示:</h6>
				<ul>
					<li>1.通过“收货管理”可以查看您目前在运送、已签收等所有状态的货单详情，是您的收货管家。</li>
					<li>2.通过“收货管理”可以查看目前货物的物流实时状态，线路信息、在线位置等，让您的货物运输过程一目了然。</li>
					<li>3.在“运单查询”中输入您在物通网上的货单号即可查看货物运输状态。</li>
				</ul>
			</a-col>
		</a-row>
	</div>
</template>
<script>
	const columns = [{
			title: '运单号',
			dataIndex: 'name',
		},
		{
			title: '发货人',
			dataIndex: 'age',
		},
		{
			title: '收货人',
			dataIndex: 'address',
		},
		{
			title: '发货时间',
			dataIndex: 'time',
		},
		{
			title: '操作',
			dataIndex: 'operation',
		}
	];

	const data = [];
	for(let i = 0; i < 46; i++) {
		data.push({
			key: i,
			name: `Edward King ${i}`,
			age: 32,
			address: `London, Park Lane no. ${i}`,
			time:'2019.4.26',
			operation:'operation'
		});
	}
	export default {
		data() {
			return {
				data,
				columns,
				selectedRowKeys: [], // Check here to configure the default column
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {},
		components: {
			// Footer
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			callback(){
				
			},
		}
	}
</script>

<style lang="less" scoped>
	.matching-receive {
		.a-row-box {}
		.a-table {
			width: 100%;
			border: 1px solid #ccc;
		}
		.tip-bottom {
			height: 150px;
			background: #E4F0F6;
			margin-top: 50px;
			h6 {
				color: #E0330B;
				padding-left: 40px;
			}
			ul {
				list-style: none;
			}
		}
	}
</style>